<template>
    <div class="registe">
        <div class="login-head">注册</div>
        <div class="login-main">
            <div class="login-list">
                <div class="login-title">手机号</div>
                <input class="login-input" type="number" v-model="tel" placeholder="请输入手机号码">
            </div>
            <div class="login-list">
                <div class="login-title">验证码</div>
                <input class="login-input" style="width: 30vw" type="number" v-model="code" placeholder="请输入验证码" >
                <div class="login-code" @click="sendSms">{{codeTitle=='获取'?codeTitle:codeTitle+'s'}}</div>
            </div>
            <div class="login-list">
                <div class="login-title">密码</div>
                <input class="login-input" type="password" v-model="psw" placeholder="请输入登录密码" >
            </div>
            <!--            <div class="login-list">-->
            <!--                <div class="login-title">确认密码</div>-->
            <!--                <input class="login-input" type="password" v-model="psw1" placeholder="请再次输入登录密码">-->
            <!--            </div>-->
            <div class="login-list">
                <div class="login-title">姓名</div>
                <input class="login-input" type="text" v-model="realName" placeholder="请输入真实姓名" >
            </div>
            <div class="login-list">
                <div class="login-title">昵称</div>
                <input class="login-input" type="text" v-model="nickName" placeholder="请输入昵称" >
            </div>
            <div class="login-list">
                <div class="login-title">推荐人</div>
                <input class="login-input" :readonly="regOnly" type="number" v-model="reg" placeholder="请输入推荐人手机号，选填" @blur="inputScroll">
            </div>
            <div class="login-list">
                <div class="login-title">身份证</div>
                <input class="login-input" type="text" v-model="idCar" placeholder="请输入身份证号" >
            </div>
            <div class="login-list">
                <div class="login-title">银行卡</div>
                <input class="login-input" type="number" v-model="bankCar" placeholder="请输入银行卡号" >
            </div>
            <div class="login-btn" @click="register">确认注册</div>
            <div class="login-toRegiste" @click="toLogin">已有账号</div>
        </div>
    </div>
</template>

<script lang="ts">
    // @ is an alias to /src
    import {Component} from "vue-property-decorator";
    import Sence from "../sence/Sence";

    @Component({
        components: {},
    })

    export default class Registe extends Sence {
        public tel: any = ""; // 电话
        public code: any = ""; // 验证码
        public psw: any = ""; // 密码
        public psw1: any = ""; // 确认密码
        public realName: string = ""; // 真实姓名
        public nickName: string = ""; // 昵称
        public idCar: string = ""; // 身份证号
        public bankCar: any = ""; // 银行卡号
        public reg: any = ""; // 推荐人手机号
        public codeTitle: any = "获取"; // 获取验证码文字内容
        public regOnly:boolean=false; // 推荐人是否只可见

        /**
         * 去登录
         */
        public toLogin(): void {
            this.$router.push("/login");
        }

        /**
         * 初始化
         */
        public mounted():void{
            if(localStorage.getItem('token')){
                this.$router.push('/')
            }
            this.reg=localStorage.getItem('referee_mobile')||'';
            if(this.reg){
                this.regOnly=true;
            }
        }

        /**
         * 表单失去焦点回滚底部
         */
        public inputScroll():void{
            window.scrollTo(0, document.documentElement.clientHeight);
        }

        /**
         * 注册
         */
        public register(): void {
            this.inputScroll();
            let CryptoJS: any = require("crypto-js");
            let password: any = CryptoJS.AES.encrypt(CryptoJS.MD5(this.psw).toString(), CryptoJS.enc.Utf8.parse("sgg45747ss223411"), {mode: CryptoJS.mode.ECB}).toString();
            this.post("api/user/phone_reg", {
                phone: this.tel,
                nickName: this.nickName,
                real_name: this.realName,
                id_number: this.idCar,
                bank_card: this.bankCar,
                identifyCode: this.code,
                password,
                referee_mobile: this.reg,
                id:localStorage.getItem('third_id')
            }).then((res: any) => {
                localStorage.setItem("token", res.data.token);
                this.toast("注册成功");
                setTimeout(() => {
                    this.$router.push("/");
                }, 1500);
            });
        }

        /**
         * 获取手机验证码
         */
        public sendSms(): void {
            if (this.codeTitle == "获取") {
                this.post("api/identify/send", {
                    phone: this.tel,
                }).then((res: any) => {
                    this.codeTitle = 59;
                    let time = setInterval(() => {
                        this.codeTitle -= 1;
                        if (this.codeTitle == 0) {
                            clearInterval(time);
                            this.codeTitle = "获取";
                        }
                    }, 1000);

                });
            }
        }
    }


</script>

<style scoped lang="stylus">
    input {
        outline: none;
        border: 0;
        padding 5px 0;
    }

    .registe
        height 100vh
        width 100vw
        background-image url("../image/registe.png")
        background-size 100%

        .login-head
            height 35px
            line-height 35px
            color white
            font-size 16px
            font-weight bold
            text-align center

        .login-main
            width 80vw
            margin auto
            margin-top 6vh
            background white
            border-radius 8px
            box-sizing border-box
            padding 0 10px
            padding-bottom 10px

            .login-list
                display flex
                align-items center
                border-bottom 1px solid #eee
                padding 8px 0

                .login-code
                    margin-left 1vw
                    width calc(25vw - 20px)
                    background #007aff
                    text-align center
                    color white
                    height 28px
                    line-height 28px
                    border-radius 3px
                    font-size 13px


                .login-title
                    flex-shrink 0
                    font-size 14px
                    font-weight bold
                    width 22vw

                .login-input
                    width calc(57vw - 20px)
                    font-size 14px

            .login-btn
                margin-top 10px
                width 100%
                height 35px
                line-height 35px
                text-align center
                background #007aff
                color white
                border-radius: 3px

            .login-toRegiste
                margin-top 10px
                width 100%
                height 35px
                line-height 35px
                text-align center
                background #dd524d
                color white
                border-radius: 3px


</style>

